<template>
  <div>
    <vol-box :lazy="true" v-model="dialogVisible" :title=title :height="500" :width="1200" :padding="1" :draggable="true">
      <div>

        <el-table :data="tableData" style="width: 100%" height="500">

          <el-table-column v-for="(item,index) in tableHead" :key="index" :prop=item.prop :label=item.label :width=item.width sortable>
          </el-table-column>
          
        </el-table>
      </div>
      <template #footer>

        <div>
          <el-button type="default" disabled size="mini">共{{tableData.length}}条数据</el-button>
          <el-button type="danger" size="mini" @click="export_cvs(this.tableHead,this.tableData)">导出</el-button>
          <el-button type="default" size="mini" @click="dialogVisible = false">关闭</el-button>

        </div>
      </template>
    </vol-box>
  </div>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import abc from "@/uitils/h_common.js";//这是默认的写法

export default {
  components: { VolBox, abc },
  data() {
    return {
      title: "",
      dialogVisible: false,
      tableHead:[{
        prop:"kehwl",
        label:"主物料",
        width:"120"
      },{
        prop:"hangh",
        label:"行号",
        width:"120"
      },{
        prop:"wuliao",
        label:"子物料号",
        width:"120"
      },{
        prop:"shuom",
        label:"说明",
        width:"120"
      },{
        prop:"shul",
        label:"数量",
        width:"120"
      },{
        prop:"gongw",
        label:"工位",
        width:"120"
      },{
        prop:"wullx",
        label:"物料类型",
        width:"120"
      },{
        prop:"yansh",
        label:"颜色",
        width:"120",
         
      },{
        prop:"xunj",
        label:"虚拟件",
        width:"120"
      },{
        prop:"",
        label:"责任单位名称",
        width:"120"
      },],
      tableData: []
    };
  },
  setup() { },
  destroyed() { },
  mounted() {
    this.$nextTick(() => {
      //console.log(this.$store.getters.data().MOBBH);
    });
  },
  methods: {
    show_w() {
      this.$nextTick(() => {
        this.title = "亿格客户化BOM";
        // this.dialogVisible=true;
        const loading = this.$loading({//等待
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0 ,0, 0.7)'//
        });
        var turl = "/api/yg_jsgf_head/get_yg_custom_bom?xiangm=" + this.$store.getters.data().xiangm;
        this.http.post(turl, {}, true).then((s) => {
          this.tableData = s.yg_custom_bom;//规范明细
          loading.close();//关闭等待
          this.title = this.title + "-" + this.$store.getters.data().xiangm
          this.dialogVisible = true;
        });
      });
    },
    export_cvs(table_head,table_data) {
      let str="";
      for(var i=0;i<=table_head.length-1;i++) {
        str += table_head[i].label+","
      }
      str += "\n";
      for(var i=0;i<=table_data.length-1;i++) {
        for(var ii=0;ii<=table_head.length-1;ii++) {
          console.log(table_data[i][table_head[ii].prop]);
          if(table_data[i][table_head[ii].prop]!=undefined){//判断undefined
            str += table_data[i][table_head[ii].prop]+","
          }
        }
        str += "\n";
      }
      //console.log(table_data);
      let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      //console.log(str);
      //通过创建a标签实现
      let link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download = "export.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>
